<template>
    <div class="app-container">
        <el-form :inline="true"  class="demo-form-inline" style="margin-top: 2%">
            <el-row >
                <el-col >
                    <el-form-item  size="mini" label="创建时间">
                        <el-date-picker
                                v-model="searchParams.time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button  type="primary" @click="onSubmit" size="small" icon="el-icon-search" v-hasPermi="['sys:log:searchopealog']">搜索</el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <template>
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    :data="loglist"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        label="请求方法名"
                        prop="method"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="请求方式"
                        prop="requestWay"
                        width="80">
                </el-table-column>
                <el-table-column
                        :formatter="dateFormat"
                        label="创建时间"
                        prop="createTime"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="接口地址"
                        prop="apiAddress"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="ip地址"
                        prop="ip"
                        width="80">
                </el-table-column>
                <el-table-column
                        label="访问路径"
                        prop="path"
                        width="225">
                </el-table-column>
                <el-table-column
                        label="请求类名"
                        prop="requestClassName"
                        width="380">
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="show(scope.$index, scope.row)" v-hasPermi="['sys:log:operlook']">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <div class="page">
          <Pagination v-show="total>0"
                      :total="total"
                      :page.sync="searchParams.pageNum"
                      :limit.sync="searchParams.pageSize"
                      @pagination="showLogList" />
        </div>

        <el-dialog
                title="日志详情"
                :visible.sync="dialogVisible"
                width="500px" append-to-body
                :before-close="handleClose">
            <!--<pre>{{content}}</pre>-->
          <!--<pre><p v-html="content"></p></pre>-->
          <div style="white-space:pre-wrap" v-html="content">

          </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
    import {showLogList,showLogDetail} from '@/api/log/log'
    export default {
        name: "index",
        inject: ['reload'],
        components:{
          Pagination
        },
        data() {
            return {
                total: 0,
                searchParams:{
                    time:null,
                    pageNum: 1,
                    pageSize: 10,
                    beginTime:'',
                    endTime:''
                },
               loglist:[],
                currentPage: 1,
                dialogVisible: false,
                log:{},
                content:'',
                // 遮罩层
                loading: true,
            }
        },
        created(){
           this.showLogList();
        },
        methods: {
          showLogList(){
            this.loading = true;
            showLogList(this.searchParams).then(res =>{
              console.log("aaa");
              console.log(res);
              this.loglist = res.data.result;
              this.total = parseInt(res.data.total);
              this.loading = false;
            })
          },
            onSubmit() {
                if (this.searchParams.time!=null) {
                    this.searchParams.beginTime = this.searchParams.time[0];
                    this.searchParams.endTime = this.searchParams.time[1];
                }else {
                    this.searchParams.beginTime = null;
                    this.searchParams.endTime = null;
                }
              this.showLogList();
            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            show(index,row) {
                console.log(row.id);
                this.dialogVisible = true;
                showLogDetail(row.id).then(res=>{
                    console.log(res);
                    /*this.content = res.data.msg;*/
                  this.content = JSON.stringify(JSON.parse(res.data.msg),null,2);
                })
            },
          dateFormat(row){

            let datetime = row.createTime;
            if(datetime){
              datetime = new Date(datetime);
              let y = datetime.getFullYear() + '-';
              let mon = datetime.getMonth()+1 + '-';
              let d = datetime.getDate();
              return y + mon + d;
            }
            return ''

          }

        }
    }
</script>

<style scoped>
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-left: 20%;
    }
    .el-button--small, .el-button--small.is-round{
        margin-left: 10px;
    }
    .page{
        float: right;
    }
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }


   .container {
     display: flex;
     flex-direction: column;
   }
    .page {
      display: flex;
      flex-direction: row;
      margin-left: 91%;
      margin-top: 1%;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-switch__label--left{
      position: relative;
      left: 46px;
      color: #fff;
      z-index: -1111;
    }
    .el-switch__label--right{
      position: relative;
      right: 46px;
      color: #fff;
      z-index: -1111;
    }
    .el-switch__label.is-active{
      z-index: 1111;
      color: #fff;
    }
    .el-switch__label--left{
      position: relative;
      left: 46px;
      color: #fff;
      z-index: -1111;
    }
    .el-switch__label--right{
      position: relative;
      right: 46px;
      color: #fff;
      z-index: -1111;
    }
    .el-switch__label--right.is-active{
      z-index: 1111;
      color: #fff !important;
    }
    .el-switch__label--left.is-active{
      z-index: 1111;
      color: #9c9c9c !important;
    }

</style>
